---
title: Installer Astro manuellement
description: 'Comment installer Astro manuellement avec NPM, PNPM, ou Yarn.'

---
import Button from '~/components/Button.astro'
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import ReadMore from '~/components/ReadMore.astro'

Ce guide vous montrera comment installer et configurer manuellement un nouveau projet Astro.

:::tip[Vous préférez une méthode plus rapide pour commencer ?]
Suivez plutôt l'assistant [créer l'assistant CLI astr](/fr/install/auto/).
:::

#### Prérequis

- **Node.js** - version `v18.14.1` ou supérieure.
- **Éditeur de code** - Nous recommandons [VS Code](https://code.visualstudio.com/) avec notre [extension officielle Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).
- **Console de terminal** - Astro est accessible via son interface de ligne de commande (ILC).

#### Installation

Si vous préférez ne pas utiliser notre outil via ligne de commande `create-astro`, vous pouvez configurer votre projet vous-même en suivant le guide ci-dessous.

## 1. Créez votre Répertoire

Créez un répertoire vide avec le nom de votre projet, puis naviguez dans celui-ci.

```bash
mkdir my-astro-project
cd my-astro-project
```

Maintenant que vous êtes dans votre nouveau répertoire, créez votre fichier `package.json`. C'est avec ce fichier que vous pourrez gérer les dépendances de votre projet, y compris Astro. Si vous n'êtes pas familier avec ce format de fichier, lancez la commande suivante pour en créer un.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm init --yes
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm init
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn init --yes
  ```
  </Fragment>
</PackageManagerTabs>



## 2. Installer Astro

D'abord, installez les dépendances d'Astro dans votre projet.

:::note[Important]
Astro doit être installé localement, pas globalement. Assurez-vous que vous n'exécutez pas `npm install -g astro` `pnpm add -g astro` ou `yarn add global astro`.
:::

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm install astro
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm add astro
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn add astro
  ```
  </Fragment>
</PackageManagerTabs>

Ensuite, remplacez la section "scripts" de votre `package.json` par les lignes suivantes :

```json title="package.json" del={2} ins={3-6}
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```

Vous aurez besoin de ces scripts plus tard dans le guide pour lancer Astro et exécuter ses différentes commandes.

## 3. Créez votre Première Page

Dans votre éditeur de texte, créez un nouveau fichier dans votre répertoire à l'emplacement `src/pages/index.astro`. Cela sera votre première page Astro.

Pour ce guide, copiez-collez le code suivant (y compris les tirets `---`) dans votre tout nouveau fichier :

```astro title="src/pages/index.astro"
---
// Bienvenue dans Astro ! Tout ce qui est entre les barres de code "---"
// est le "Frontmatter" de votre composant. Il n'est jamais exécuté sur le navigateur.
console.log('Ceci ce lance dans votre terminal, pas sur le navigateur !');
---
<!-- Tout ce qui se situe en dessous est le "Template" de votre composant.
     Ce n'est que du HTML, mais avec quelques paillettes et un peu de magie pour vous aider à construire de grande choses. -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>
```

## 4. Créez votre Premier Fichier Statique

Vous devriez aussi créer un répertoire `public/` pour stocker vos fichiers statiques. Astro injectera toujours ces fichiers dans votre Build final, vous pouvez donc les référencer de manière sûre depuis vos Templates de composants.

Dans votre éditeur de texte, créez un nouveau fichier dans votre répertoire avec le nom `public/robots.txt`. `robots.txt` est un fichier simple que la plupart des sites incluent pour dire aux moteurs de recherche comme Google comment traiter votre site.

Pour ce guide, copiez-collez le code suivant dans votre nouveau fichier :

```diff title="public/robots.txt"
# Exemple: Autorisez tous les robots à parcourir et indexer votre site.
# Syntaxe Complète: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```

## 5. Créez votre Fichier `astro.config.mjs`

Astro est configuré en utilisant le fichier `astro.config.mjs`. Ce fichier est optionnel lorsque vous ne souhaitez pas configurer Astro, mais vous pouvez le créer maintenant.

Créez le fichier `astro.config.mjs` à la racine de votre projet, et copiez le code ci-dessous dans le fichier :

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

// https://astro.build/config/
export default defineConfig({});
```

Si vous souhaitez inclure des [composants de Framework](/fr/guides/framework-components/) comme React, Svelte, etc... ou utiliser d'autres outils tels que Tailwind ou Partytown dans votre projet, c'est ici qu'il faudra [importer et configurer ces intégrations](/fr/guides/integrations-guide/).

<ReadMore>Lisez la [référence d'API](/fr/reference/configuration-reference/) d'Astro pour plus d'informations.</ReadMore>

## 6. Créer votre Fichier `tsconfig.json`

TypeScript est configuré en utilisant `tsconfig.json`. Même si vous n'écrivez pas de code TypeScript, ce fichier est important afin que les outils comme Astro et VS Code sachent comment comprendre votre projet. Certaines fonctionnalités (comme les imports de paquets npm) ne sont pas entièrement supportés dans l'éditeur sans un fichier `tsconfig.json`.

Si vous avez l'intention d'écrire du code TypeScript, l'utilisation du template Astro `strict` or `strictest` est recommandé. Vous pouvez voir et comparer les trois configurations de template à [astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/).

Créez le fichier `tsconfig.json` à la racine de votre projet, et copiez le code ci-dessous à l'intérieur. (Vous pouvez utiliser `base`, `strict` ou `strictest` pour votre template TypeScript) :

```json title="tsconfig.json" "base"
{
  "extends": "astro/tsconfigs/base"
}
```

Enfin, créez `src/env.d.ts`` pour que TypeScript sache des types ambiants disponibles dans votre projet Astro:

```ts title="src/env.d.ts"
/// <reference types="astro/client" />
```

<ReadMore>Lisez le [guide d'installation de TypeScript](/fr/guides/typescript/#configuration) d'Astro pour plus informations.</ReadMore>

## 7. Étapes Suivantes

Si vous avez suivi les étapes ci-dessus, votre répertoire de projet devrait maintenant ressembler à ça :

<FileTree>
- node_modules/
- public/
  - robots.txt
- src/
  - pages/
    - index.astro
  - env.d.ts
- astro.config.mjs
- package-lock.json ou `yarn.lock`, `pnpm-lock.yaml`, etc.
- package.json
- tsconfig.json
</FileTree>

Bien joué, vous êtes prêt à utiliser Astro !

Si vous avez suivi ce guide jusqu'au bout, vous pouvez aller directement à l'[Étape 2: Lancer Astro ✨](/fr/install/auto/#2-lancer-astro-) pour continuer et apprendre comment lancer Astro pour la première fois.
